<template>
  <view class="container">
    <view class="circle_box" v-if="!isLoaded">
      <l-circle trailWidth="28" size="200px" strokeWidth="28" strokeColor="#509BF8" :current.sync="modelVale"
        :percent="target">
        <text class="values_text">{{ modelVale }}%</text>
      </l-circle>
      <view class="desc">正在为您配置设备，请稍候... </view>
    </view>

    <view v-else class="circle_box">
      <img src="@/static/icon/suss_icon.png" alt="" />

      <view class="fin_btn" @click="toNext">完成</view>
    </view>
  </view>
</template>

<script>
import storage from "@/utils/storage";
const App = getApp();

export default {
  components: {},
  data() {
    return {
      modelVale: 0,
      target: 0,
      timer: null,
      //   是否已经加载完
      isLoaded: false,
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    const app = this;
    // 每两秒增加一次，直到target为100
    this.timer = setInterval(() => {
      app.addTarget(10);
    }, 1000);
  },
  onUnload() {
    clearInterval(this.timer);
  },
  //   监听target的变化
  watch: {
    target: {
      handler(newVal, oldVal) {
        if (newVal >= 100) {
          // this.isLoaded = true;

          uni.showModal({
            title: '提示',
            content: '暂未找到设备',
            showCancel: false,
            success: ({ confirm, cancel }) => {
              if (confirm) {
                uni.reLaunch({
                  url: "/pages/index/index",

                });
              }
            }
          })

          clearInterval(this.timer);
        }
      },
      immediate: true,
    },
  },

  methods: {
    addTarget(number) {
      this.target = Math.max(Math.min(100, this.target + number), 0);
    },
    // 添加成功
    toNext() {
      let _currentDevice = storage.get("device_list") || [];
      _currentDevice.push({
        name: "温控器",
        id: "0234321321",
        status: 1,
      });
      storage.set("device_list", _currentDevice, 10 * 60 * 1000);
      //   返回到首页
      uni.reLaunch({
        url: "/pages/index/index",
        success() {
          uni.showToast({
            title: "添加成功",
            icon: "none",
          });
        },
        fail(e) {
          console.log("返回失败", e);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background: #f6f7fb;
  margin-top: 170.455rpx;

  position: relative;

  .circle_box {
    position: absolute;
    // 左右据中
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
      width: 175.568rpx;
      height: 175.568rpx;
    }

    .fin_btn {
      margin-top: 88.636rpx;
      width: 361.364rpx;
      height: 83.523rpx;
      border-radius: 44.318rpx;
      background: #60a4f7;

      font-family: "Microsoft YaHei";
      font-size: 25.568rpx;
      font-weight: 290;
      line-height: 34.006rpx;
      text-align: center;
      color: white;

      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .values_text {
    color: #509bf8;
    font-family: "Microsoft YaHei";
    font-size: 51.136rpx;
    font-weight: 700;
    line-height: 67.483rpx;
    text-align: center;
  }
}

.desc {
  font-family: "Microsoft YaHei";
  font-size: 30.682rpx;
  font-weight: 400;
  line-height: 40.5rpx;
  text-align: center;
  color: #000000;
  margin-top: 85.227rpx;
}
</style>